<extend name="api/body" />
<block name="body">
    <style>
        .back_btn,.logout{display:none;}
    </style>
    <?php
		if(!$list){
	?>
    <div style="padding:10rem 0;text-align:center;font-size:1.8rem;font-weight:200;color:#999;">
        ~ <?=$project_info['id']?'暂未添加相关接口':'接口文档不存在或已被删除'?> ~
    </div>
    <?php
		}else{
	?>
    <div class="row">
        <div class="col-3 card" style="padding:0;margin-top:10px;">
            <div class="card-header clearfix" style="padding:5px;">
                <div class="float-left" style="line-height:30px;padding-left:0.3rem;">接口列表</div>
                <div class="float-right">
                    <a href="javascript:void(0);" class="js_close_all btn btn-sm btn-outline-primary">收起全部</a>
                    <a href="javascript:void(0);" class="js_open_all btn btn-sm btn-outline-primary">展开全部</a>
                </div>
            </div>
            <div class="card-body" style="padding:0.5rem;">
                <div class="js_api_title api_catalog" style="overflow-y:auto;">
                    <?php
                        $num=0;
                        $api_list=[];
                        foreach($list as $v){
                            $api_data[$v['id']]=$v;
                            if($v['pid']!=0) continue;
                    ?>
                    <div>
                        <div class="js_module api_module clearfix">
                            <div class="module_title float-left">
                                <svg class="bi bi-chevron-right" width="1.2em" height="1.2em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"></path>
                                </svg>
                                <?=$v['title']?>
                            </div>
                        </div>
                        <div class="api_title">
                        <?php
                            foreach($list as $row){
                                if($v['id']!=$row['pid']) continue;
                                $num++;
                                $api_list[$v['pid']][]=$row;
                        ?>
                        <div class="break_word" style="border-bottom:1px solid #eee;">
                            <a href="#<?=$row['serial_num']?>" style="padding:5px 0;" class="ellipsis">
                                <?=$num.'、'.$row['title']?>
                            </a>
                        </div>
                        <?php
                            }
                        ?>
                        </div>
                    </div>
                    <?php
                        }
                    ?>
                </div>
            </div>
        </div>
        <div class="js_api_list api_list col-9" style="padding-right:0;overflow-y:auto;margin-top:10px;">
            <?php
                $num=0;
				foreach($api_list as $v){
				    foreach($v as $row){
				        if($row['pid']==0) continue;
                        $num++;
			?>
            <div class="js_panel_box card">
                <a name="<?=$row['serial_num']?>"></a>
                <div class="card-header clearfix">
                    <div class="float-left">
                        <b><?=$num.'、'.$api_data[$row['pid']]['title'].' - '.$row['title']?></b>
                        <div class="url_info">
                            <span class="badge badge-<?=$row['request_type']=='post'?'danger':'success'?>"><?=strtoupper($row['request_type'])?></span>
                            -
                            <span style="color:#666;"><?=$project_info['project_url'].$row['api_url']?></span>
                        </div>
                    </div>
                </div>

                <form class="js_api_form" action="<?=$project_info['project_url'].$row['api_url']?>" method="<?=$row['request_type']?>" target="api_result_<?=$row['id']?>">
                    <?php
                        if($row['remark']){
                    ?>
                    <div class="card-body" style="padding:5px 10px;">
                        <?=str_replace("\n","<br />",$row['remark'])?>
                    </div>
                    <?php
                        }
                        $api_info=json_decode($row['api_param'],true);
                        if($api_info){
                    ?>
                    <!-- Table -->
                    <table class="table">
                        <thead>
                            <tr style="background:#fcfcfc;">
                                <th style="padding:5px;padding-left:13px;" width="150">参数名称</th>
                                <th style="padding:5px;" width="100" class="text-center">参数类型</th>
                                <th style="padding:5px;" width="80" class="text-center">是否必须</th>
                                <th style="padding:5px;" width="100" class="text-center">默认值</th>
                                <th style="padding:5px;">参数说明</th>
                                <th style="padding:5px;" width="150" class="text-center">填充示例</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                                foreach($api_info as $val){
                            ?>
                            <tr>
                                <td style="padding:2px;"><input type="text" name="name" disabled style="line-height:normal;cursor:default;height:24px;" class="form-control" value="<?=$val['name']?>" ></td>
                                <td style="padding:2px;text-align:center;"><?=$val['type']?></td>
                                <td style="padding:2px;text-align:center;"><div style="text-align:center;color:#<?=$val['is_require']=="yes"?'f00':'999'?>;" ><?=strtoupper($val['is_require'])?></div></td>
                                <td style="padding:2px;"><input type="text" disabled style="line-height:normal;cursor:default;height:24px;" class="form-control text-center" value="<?=$val['default']?>" ></td>
                                <td style="padding:2px;"><?=$val['remark']?></td>
                                <td style="padding:2px;"><input type="text" name="value" style="line-height:normal;height:24px;border:1px solid #eee;" class="form-control" value="<?=$val['type']=="file"?'':$val['demo']?>" placeholder="<?=$val['type']=="file"?'暂不支持上传':'点击输入'?>" <?=$val['type']=="file"?'disabled':''?> ></td>
                            </tr>
                            <?php
                                }
                            ?>
                        </tbody>
                    </table>
                    <?php
                        }
                    ?>
                    <div class="nav-tabs-custom" style="margin:0;">
                        <div class="clearfix" style="background:#fcfcfc;padding:0.5rem 1rem;">
                            <div class="float-left">接口参数说明</div>
                            <div class="float-right"><button type="sbumit" class="btn btn-sm btn-primary">点击请求接口</button></div>
                        </div>
                        <div class="row">
                            <div class="js_return_param col-6" style="min-height:120px;">
                                <?php
                                    if($row['return_param']){
                                ?>
                                <pre class="break_word" style="padding-left:10px;"><?=$row['return_param']?></pre>
                                <?php
                                    }else{
                                ?>
                                <div>暂无接口说明</div>
                                <?php
                                    }
                                ?>
                            </div>
                            <div class="col-6 js_api_return" style="background:#fcfcfC;overflow-y:auto;">
                                <iframe src="" class="js_frame" name="api_result_<?=$row['id']?>" style="width:100%;height:100%;border:none;"></iframe>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <?php
                    }
                }
            ?>
        </div>
    </div>
    <?php
		}
	?>
</block>
<block name="js">
    <script type="text/javascript">
        $(function(){
            $(".js_api_title").height($(window).height()-162);
            $(".js_api_list").height($(window).height()-85);
            $(window).resize(function(){
                $(".js_api_title").height($(window).height()-162);
                $(".js_api_list").height($(window).height()-85);
            })
            $(".js_return_param").each(function(){
                $(this).next().height($(this).height());
            })
            $(".js_module .module_title").on("click",function(){
                $(this).toggleClass("active");
                $(this).parent().next().toggle();
            })
            
            $(".js_close_all").on("click",function(){
                $(".js_module .module_title").addClass("active");
                $(".js_module .module_title").parent().next().hide();
            })
            $(".js_open_all").on("click",function(){
                $(".js_module .module_title").removeClass("active");
                $(".js_module .module_title").parent().next().show();
            })
        })
    </script>
</block>